<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			/*将所有内容内外边距设置为0*/
			/*外边距*/
			margin: 0;
			/*内边距*/
			padding: 0;
		}
		/*容器的宽度喝高度都充满全屏*/
		/*将整体网页标签设置为宽高100%*/
		html,body{
			width: 100%;
			height: 100%;
		}
		/*设置文档中的所有内容*/
		body{
			/*背景颜色*/
			background-color: pink;
			/*开启弹性盒子,默认内容摆放为横向摆放*/
			display: flex;
			/*设置弹性在父容器的位置*/
			flex-direction: row;
			/*水平居中*/
			align-items: center;
			/*垂直居中*/
			justify-content: center;
		}
		/*设置heart类的div标签属性*/
		.heart{
			/*宽*/
			width: 200px;
			/*高*/
			height: 200px;
			/*背景色*/
			background-color:red;
			/*设置定位：相对定位(处在文档流)*/
			position: relative;
			/*设置旋转角度为45度*/
			transform: rotate(45deg);
			animation: xin 2s alternate infinite;
			
		}
		/*设置heart类的div标签属性的伪对象*/
		.heart::before{
			/*使用属性插入的内容都是匿名的可替换元素*/
			content:"";
			/*宽*/
			width: 200px;
			/*高*/
			height: 100px;
			/*背景色*/
			background-color: red;
			/*设置定位：绝对定位(脱离文档流)*/
			position: absolute;
			/*让半圆与正方形进行重合，避免元素中间出现细线*/
			/*距离左边0*/
			left: 0;
			/*距离顶部-99*/
			top: -99px;
			/*设置圆角     左上   右上  右下  左下*/
			border-radius:100px 100px   0     0 ;
		}
		.heart::after{
			/*使用属性插入的内容都是匿名的可替换元素*/
			content:"";
			/*宽*/
			width: 100px;
			/*高*/
			height: 200px;
			/*背景色*/
			background-color: red;
			/*设置定位：绝对定位(脱离文档流)*/
			position: absolute;
			/*让半圆与正方形进行重合，避免元素中间出现细线*/
			left: -99px;
			top: 0;
			/*设置圆角     左上   右上  右下  左下*/
			border-radius:100px   0     0   100px ;
		}
		/*实现心跳动画*/
		@keyframes xin{
			0%{
				/*旋转45度*/          /*缩放0.6倍*/
				transform: rotate(45deg) scale(0.6);
			}
			100%{
				/*旋转45度*/          /*缩放1.4倍*/
				transform: rotate(45deg) scale(1.4);
			}
		}
		.ppp{
			text-align: center;	
			font-size: 100px;
			height: 100px;
			/*设置定位：绝对定位(脱离文档流)*/
			position: absolute;
			top: 0px;
		}
	</style>
	<body>
		<!--div容器标签-->
		<div class="heart"></div>
		<div class="ppp">
			<p>这是一颗跳动的心</p>
		</div>
		
	</body>
</html>